<#assign ctx=request.contextPath />
<#import '${ctx}/sys/include/head.html' as d/>
<#import '${ctx}/sys/include/body.html' as c/>
<#import '${ctx}/sys/include/table/toolbar.html' as t/>
<!DOCTYPE html>
<html>
<head>
<@d.head title="已保存图表列表" />
<script src="${ctx}/resource/antv/g2.v4.0.8.js"></script>
<script src="${ctx}/resource/antv/dataset.js"></script>
<script type="text/javascript" src="${ctx}/resource/js/chart_draw.js"></script>
</head>
<@c.body>
<table class="layui-hide" id="def_list" lay-filter="def_list">
</@c.body>
<script>
layui.use(['table','appJs','dtree'],function(){
	var table = layui.table;
	var $ = layui.$;
	var app = layui.appJs;
	var dtree = layui.dtree;
	var tableOptions = {
		  	id:'def_list'
			    ,elem: '#def_list'
			    //,height: 420
			    ,url: '${ctx}/biz/chart/def/list' //数据接口
			    ,title: '已保存图表'
			    ,page: true //开启分页
			    ,toolbar: '#topBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
			    ,cols: [[ //表头
			      {type: 'checkbox', fixed: 'left'}
			      ,{field: 'name',width:100, title: '图表名'}
			      ,{field: 'chartDef',title: '定义详情'}
			      ,{fixed: 'right',title:'操作', width:180, align:'center', toolbar: '#itemBar'}
			    ]]
			  };
	 table.render(tableOptions);
	 
	  table.on('tool(def_list)',function(obj){
		  var rowData = obj.data; //获得当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  var tr = obj.tr; //获得当前行 tr 的DOM对象

		  if(layEvent === 'detail'){ //查看
		    var layerIndex = layer.open({
		    	type:1
		    	,title:'图表预览'
		    	,area:[(window.innerWidth - 150)+'px',(window.innerHeight - 250)+'px']
		    	,resize:false
		    	,content:'<div id="chart_div" style="margin:30px;"></div>'
		      	,success:function(layero, index){
		      		let chart = new G2.Chart({
     	           	    container: chart_div,
     	           	 	autoFit: true,
     	           	    height: window.innerHeight - 500
     	           	});
		      		try{
		      			app.ajax('post','${ctx}/biz/chart/data',{req:rowData.chartDef},function(data){
		      				draw(JSON.parse(rowData.chartDef),chart,data);
		     	        	   //app.pic(chart,option);
		     	        	   chart.render();
		      			});
	             	   }catch(e){
	             		   console.log(e)
	             		   layer.msg('解析出错');
	             	   }
		      		//iframeWin.disableEdit();
		      	}
		    });
		  }
		  if(layEvent === 'del'){ //删除
		    layer.confirm('真的删除行么', function(index){
		    	$.ajax({
	  		    	  type:'post',
	  		    	  url:'${ctx}/biz/chart/def/delete',
	  		    	  data:{id:rowData.id},
	  		    	  success:function(data){
	  		    		  if(data.code == 0) {
	  		    		  	layer.msg("删除成功");
	  		    		  obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	  				      layer.close(index);
	  		    		  }else {
	  		    			  layer.msg(data.code+":"+data.msg);
	  		    		  }
	  		    	  }
	  		      });
		    });
		  }
		  if(layEvent === 'edit'){ //编辑

		  }
	  });

})
</script>
<@t.bar />